<template>
  <view class="ver-layout">
    <view class="bank-title hor-layout">
      <view class="title">My Card</view>
      <view class="text">（1 in total）</view>
    </view>
    <!--  银行卡卡片布局  -->
    <view class="bank-card-view ver-layout">
      <view class="hor-layout">
        <image class="icon" src="https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/-1529573953_825288341.png"></image>
        <view class="bank-card-info ver-layout">
          <view class="name">Union bank of Nigeria</view>
          <view class="hor-layout-side">
            <view class="number">****12312312</view>
            <u-icon size="18" name="eye" color="#999999"></u-icon>
          </view>
        </view>
      </view>
      <view class="divider-line"></view>
      <view class="default-layout hor-layout-side">
        <view class="hor-layout">
          <u-checkbox-group>
            <u-checkbox v-model="checked" shape="circle" label="Default bank card"></u-checkbox>
          </u-checkbox-group>
        </view>
        <u-icon name="close" size="17" color="#999999" @click="confirmDelete.show=true"></u-icon>
      </view>
    </view>
    <!--  添加银行卡  -->
    <view class="add-card-layout hor-layout" @click="toPage(newBankAct)">
      <u-icon name="plus-circle-fill" color="#55BBB3" size="25"></u-icon>
      <view style="margin-left: 10px">Add a bank card</view>
    </view>
    <!--  确认删除弹窗  -->
    <u-modal :show="confirmDelete.show" :title="confirmDelete.title" :content="confirmDelete.content"
             :showCancelButton="confirmDelete.showCancelButton" :asyncClose="true"
             @confirm="confirmDeleteCard" @cancel="confirmDelete.show=false"></u-modal>
  </view>
</template>

<script>
import {newBankAct} from "@/router"

export default {
  name: "bindBank",
  data() {
    return {
      checked: false,
      newBankAct,
      confirmDelete: {
        show: false,
        title: 'Hint',
        showCancelButton: true,
        content: 'Are you sure you want to delete this card?'
      },
    }
  },
  methods: {
    toPage(url) {
      this.$tools.pageGo(url)
    },
    confirmDeleteCard() {
      this.confirmDelete.show = false
    }
  }
}
</script>

<style scoped lang="scss">
page {
  padding: 12px;
}

.bank-title {
  font-size: small;

  .title {
    font-weight: bold;
  }

  .text {
    color: #999999
  }
}

.bank-card-view {
  margin-top: 13px;
  padding: 13px;
  background: white;
  border-radius: 8px;

  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .bank-card-info {
    margin-left: 10px;
    flex: 1;

    .name {
      font-weight: bold;
      margin-bottom: 10px;
    }
  }

  .default-layout {
    margin: 5px 0px;
  }
}

.divider-line {
  margin: 8px 0px;
  width: 100%;
  height: 1px;
  background: #dcd6d6;
}

.add-card-layout {
  margin-top: 13px;
  padding: 16px 13px;
  background: white;
  border-radius: 8px;
}
</style>
